// JS 模拟 CSS active 效果的过程 
// http://blog.csdn.net/zhangxin09/article/details/8253679
;(function(){
	if(!window.navigator.isAndroid_2)return;
	document.addEventListener('touchstart', makeActive);
	document.addEventListener('touchend',   makeActive);

	/**
	 * <ul data-isActivable="true">
	 * 	<li></li>
	 * 	....
	 * </ul>
	 * @param  {[type]} e [description]
	 * @return {[type]}   [description]
	 */
	function makeActive(e) {
		// debugger;
		var el = e.target;
		var shouldActive		= el.getAttribute('data-isActivable'),
			highlightElSelector	= el.getAttribute('data-highlightElSelector');

		// 先看看本身的节点要不要高亮，如果不要，再看看父节点的。查看的层数为 3
		if(!shouldActive){
			var parentNode = el.parentNode;
			for(var i = 0; i < 3 /* 当前支持到两层的父节点 */; i++){
				if(parentNode){
					shouldActive = parentNode.getAttribute('data-isActivable');
				}
				if(shouldActive || !parentNode){
					break;
				}
				parentNode = parentNode.parentNode;
			}

			highlightElSelector	= parentNode.getAttribute('data-highlightElSelector');
			parentNode = null;
		}

		// 明确不需要 active，退出该逻辑。
		if(!shouldActive){
			return;
		}else{
			toggleActive(getWhatElmentToActive(el, highlightElSelector));
		}
	}

	/**
	 * [getWhatElmentToActive description]
	 * @param  {Element} el                  [description]
	 * @param  {String} highlightElSelector [description]
	 * @return {Element}                     [description]
	 */
	function getWhatElmentToActive(el, highlightElSelector){
		var highlightEl;

		highlightElSelector = highlightElSelector || 'li';
		highlightElSelector = highlightElSelector.toUpperCase();

		while(el){
			if(el.tagName == highlightElSelector){
				highlightEl = el;
				break;
			}else{
				el = el.parentNode;
				if(!el)break;
			}
		}

		el = null;

		return highlightEl;
	}

	/**
	 * [toggleActive description]
	 * @param  {Element} highlightEl [description]
	 */
	function toggleActive(highlightEl){
		var activeClass = 'active';
		if(highlightEl.className.indexOf(activeClass) != -1){
			highlightEl.className = '' // remove it
		}else{
			highlightEl.className = 'active';
		}
	}
})();

/**
 * 如浏览器不支持 HTML5 data-* 属性，设置一个。
 * 参见：《自动获取HTML5 的 data-* 属性》
 * http://blog.csdn.net/zhangxin09/article/details/8438722
 */
;(function(){
    /**
     * 测试元素
     * @return {Boolean}
     */
    function canSupportDataSet(){
        var el, isSupport;
        el = document.createElement('div');
        el.setAttribute('data-id', '111'); // 可否省略？
        isSupport = !!el.dataset;
        el = null; // 要完全移除 dummy 元素，是否这样就 ok？
        return isSupport;
    }

	if(!canSupportDataSet()){
		Element.prototype.dataset = {};
		/**
		 * @param {String} key
		 */
		Element.prototype.getData = function(key){
			return this.getAttribute('data-' + key);
		}

        modifyQuerySelectorAll_By(document);  // document 的好像不一样……
        modifyQuerySelectorAll_By(Element.prototype);
    }

    /**
     * 覆盖系统的 querySelector/querySelectorAll 方法。
     * @param host {Element.prototype/Document}
     */
    function modifyQuerySelectorAll_By(host){
		var querySelectorAll = host.querySelectorAll; // 保存一个
		host.querySelectorAll = function(){
			var resultEls = querySelectorAll.apply(this, arguments);
			for(var resultEl, i = 0, j = resultEls.length; i < j; i++){
				resultEl = resultEls[i];
				resultEl.dataset = getAttrib(resultEl.attributes);
				fixAddEvent(resultEl);
			}

			return resultEls;
		}

		// 也就是单个的 document.querySelectorAll()。不保存，直接覆盖
		host.querySelector = function(){
			var resultEls = host.querySelectorAll.apply(this, arguments);
			return resultEls ? resultEls[0] : null;
		};
    }

	/**
	 * 把元素保存为 JSON 对象
	 * @param {Element.attributes} attributes 元素属性集合
	 * @return {Object}
	 */
    function getAttrib(attributes) {
        if (!attributes) return null;
        var hash = {};

        for (var attribute, i = 0, j = attributes.length; i < j; i++) {
            attribute = attributes[i];
            if(attribute.nodeName.indexOf('data-') != -1){
	            hash[attribute.nodeName.slice(5)] = attribute.nodeValue;
            }
        }

        return hash;
    }
	
	function fixAddEvent(el){
		if(el.addEventListener)return;
		el.addEventListener = Element.prototype.addEventListener; 
		
		if(el.onClk)return;
		for(var i in Element.addElementMethod){
			el[i] = Element.addElementMethod[i];
		}
	}

	function getPmitType(value){
		if(/\btrue\b/i.test(value)){
			value = true;
		}
		if(/\bfalse\b/i.test(value)){
			value = false;
		}
		if(/\b\d+\b/.test(value)){
			value = Number(value);
		}	
		if(/\bnull\b/.test(value)){
			value = null;
		}

		return value;
	}

	/**
	 * 设计一个函数获取 data-* 属性其值。
	 * 如果不支持 data-*，则回退至原生获取方式获取。
	 * @param  {String}  arrribKey [description]
	 * @param  {Booelan} isForceStringType [description] 是否都返回 String，不进行自动类型识别
	 * @return {[type]}           [description]
	 */
	Element.prototype.getAttrib = function(attribKey, isForceStringType){
		var value;
		if(typeof attribKey != 'string'){
			throw '参数类型不正确！';
		}
		if(this.dataset && this.dataset[attribKey]){
			value = this.dataset[attribKey];
		}else{
			value = this.getAttribute('data-' + attribKey);
		}
		
		return !isForceStringType ? getPmitType(value) : value;
	}
})();